﻿<!DOCTYPE html>
<html style="height: 100%;">

<head>
    <meta charset="utf-8" />
    <title>控制面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <style type="text/css">
        .active,
        .nav > li > a:focus,
        .nav > li > a:hover {
            color: white;
            background-color: #337ab7;
        }
        .column {
            display: flex;
            height: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>
    <script>
        window.onload = function () {
            $('ul').on('click', 'li', function () {
                $('.active').removeClass('active');
                $(this).find('.nav-link').addClass('active');
            });
            $.ajax({
                url: "/api/devices/login",
                type: "post",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({
                    areaCode: 'all',
                    deviceMac: 'A8:41:F4:B2:3D:C8'
                }),
                contentType: 'application/json',
                success: function (res) {
                    if (res?.success) {
                        const token = res.result.token;
                        sessionStorage.setItem('token', token);
                    } else
                        alert(res?.message);
                }
            });
        }
    </script>
</head>

<body style="height: 100%;">
    <div class="column">
        <div style="margin-top:10pt;">
            <img src="imgs/icon.png" width="46" height="46" />
            <label style="font-size:20pt">智能农业控制系统</label>
        </div>
        <div style="height: calc(100% - 80px)" class="container text-center">
            <div class="row" style="height: 100%;">
                <div class="col-md-2">
                    <ul class="nav flex-column nav-pills">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" aria-current="page"
                               href="javascript:$('#frame').attr('src','pages/areas.html')">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-device-ssd-fill" viewBox="0 0 16 16">
                                    <path d="M5 8V4h6v4z" />
                                    <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m9 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M3.5 11a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m9.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M4.75 3h6.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-.75.75h-6.5A.75.75 0 0 1 4 8.25v-4.5A.75.75 0 0 1 4.75 3M5 12h6a1 1 0 0 1 1 1v2h-1v-2h-.75v2h-1v-2H8.5v2h-1v-2h-.75v2h-1v-2H5v2H4v-2a1 1 0 0 1 1-1" />
                                </svg>
                                区域管理
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" aria-current="page"
                               href="javascript:$('#frame').attr('src','pages/crops.html')">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-device-ssd-fill" viewBox="0 0 16 16">
                                    <path d="M5 8V4h6v4z" />
                                    <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m9 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M3.5 11a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m9.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M4.75 3h6.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-.75.75h-6.5A.75.75 0 0 1 4 8.25v-4.5A.75.75 0 0 1 4.75 3M5 12h6a1 1 0 0 1 1 1v2h-1v-2h-.75v2h-1v-2H8.5v2h-1v-2h-.75v2h-1v-2H5v2H4v-2a1 1 0 0 1 1-1" />
                                </svg>
                                农作物管理
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" aria-current="page"
                               href="javascript:$('#frame').attr('src','pages/devices.html')">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-device-ssd-fill" viewBox="0 0 16 16">
                                    <path d="M5 8V4h6v4z" />
                                    <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m9 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M3.5 11a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m9.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M4.75 3h6.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-.75.75h-6.5A.75.75 0 0 1 4 8.25v-4.5A.75.75 0 0 1 4.75 3M5 12h6a1 1 0 0 1 1 1v2h-1v-2h-.75v2h-1v-2H8.5v2h-1v-2h-.75v2h-1v-2H5v2H4v-2a1 1 0 0 1 1-1" />
                                </svg>
                                设备管理
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" href="javascript:$('#frame').attr('src','pages/sync.html')">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-send-arrow-down-fill" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                          d="M15.854.146a.5.5 0 0 1 .11.54L13.026 8.03A4.5 4.5 0 0 0 8 12.5c0 .5 0 1.5-.773.36l-1.59-2.498L.644 7.184l-.002-.001-.41-.261a.5.5 0 0 1 .083-.886l.452-.18.001-.001L15.314.035a.5.5 0 0 1 .54.111M6.637 10.07l7.494-7.494.471-1.178-1.178.471L5.93 9.363l.338.215a.5.5 0 0 1 .154.154z" />
                                    <path fill-rule="evenodd"
                                          d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m.354-1.646a.5.5 0 0 1-.722-.016l-1.149-1.25a.5.5 0 1 1 .737-.676l.28.305V11a.5.5 0 0 1 1 0v1.793l.396-.397a.5.5 0 0 1 .708.708z" />
                                </svg>
                                设备应用
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-10" style="height: 100%;">
                    <iframe id="frame" height="100%" width="100%" frameborder="0" allowtransparency="yes"
                            style="height: 100%; width:100%; border: none" src="./pages/areas.html"></iframe>
                </div>
            </div>
        </div>
    </div>
</body>

</html>